<template>
  <div class="agents-edit">
    <el-dialog v-bind="$attrs" :title="state.dialogTitle" v-model="state.modalVisible" :before-close="cancelDialog"
      :append-to-body="true" :destroy-on-close="true" :close-on-click-modal="false" :close-on-press-escape="false"
      :lock-scroll="false" class="agents-dialog" draggable>
      <!-- 代理商信息 -->
      <el-card class="mb-4" shadow="never">
        <el-descriptions title="基本信息" size="small" :column="3">
          <el-descriptions-item label="代理商类型">{{ state.viewData.agentstype }}</el-descriptions-item>
          <el-descriptions-item label="代理商名称">{{ state.viewData.agentsname }}</el-descriptions-item>
          <el-descriptions-item label="联系人">{{ state.viewData.agentslxr }}</el-descriptions-item>
          <el-descriptions-item label="证件号">{{ state.viewData.agentszjh }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ state.viewData.agentslxdh }}</el-descriptions-item>
          <el-descriptions-item label="联系地址">{{ state.viewData.agentslxdz }}</el-descriptions-item>
          <el-descriptions-item label="纳税人识别号">{{ state.viewData.agentslsrsbh }}</el-descriptions-item>
          <el-descriptions-item label="邮件" :span="2">{{ state.viewData.agentsyj }}</el-descriptions-item>
          <el-descriptions-item label="营业执照" class-name="align-middle">
            <el-image v-for="(item, index) in state.yyzzImages" :key="index" :src="item.url" fit="contain"
              style="width: 100px; height: 100px; margin-right: 10px;" />
          </el-descriptions-item>
          <el-descriptions-item label="身份证" class-name="align-middle">
            <el-image v-for="(item, index) in state.sfzImages" :key="index" :src="item.url" fit="contain"
              style="width: 100px; height: 100px; margin-right: 10px;" />
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <!-- 付款单信息 -->
      <el-table v-loading="state.tableLoading" :data="state.tableData" row-key="wxpz_id" style="flex:1; height: 150px;">
        <el-table-column prop="depositslipid" label="付款单流水号" min-width="130" show-overflow-tooltip></el-table-column>
        <el-table-column prop="depositsagentsid" label="关联代理商id" min-width="130" show-overflow-tooltip></el-table-column>
        <el-table-column prop="depositsaccountid" label="关联客户id" min-width="140" show-overflow-tooltip></el-table-column>
        <el-table-column prop="depositsproductid" label="关联产品id" min-width="100" show-overflow-tooltip></el-table-column>

        <el-table-column prop="depositslipype" label="付款单类型" min-width="100"></el-table-column>
        <el-table-column prop="depositslipprice" label="付款金额" min-width="100"></el-table-column>
        <el-table-column prop="depositslippaystatus" label="支付状态" min-width="100"></el-table-column>
        <el-table-column prop="depositslipshstatus" label="支付状态" min-width="100"></el-table-column>
        <el-table-column prop="depositslipfkdate" label="付款时间" min-width="100"></el-table-column>


        <el-table-column prop="depositslipcreateuser" label="创建人" min-width="150"></el-table-column>
        <el-table-column prop="depositslipcreatedate" label="创建时间" min-width="170"></el-table-column>
      </el-table>
      <!-- 审核内容 -->
      <el-form ref="examineRef" :model="state.form" :rules="state.rules" label-width="80px" class="mt-4">
        <el-row>
          <el-col :span="8">
            <!-- 待审核，审核通过，审核不通过 -->
            <el-form-item label="审核状态" prop="agentsshstatus">
              <el-radio-group v-model="state.form.agentsshstatus">
                <el-radio label="审核通过">通过</el-radio>
                <el-radio label="审核不通过">不通过</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核时间" prop="agentsshdate">
              <el-input v-model="state.form.agentsshdate" placeholder="审核时间" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核人" prop="agentsshr">
              <el-input v-model="state.form.agentsshr" placeholder="审核人" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审核备注" prop="agentsshbz">
              <el-input type="textarea" :rows="5" v-model="state.form.agentsshbz" placeholder="审核备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitDialog">确 定</el-button>
          <el-button @click="cancelDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  
<script setup>
import useDepositslipManageManageStore from '@store/modules/depositslipManage'
import useAgentsManageManageStore from '@store/modules/agentsManage'
import useUserStore from '@store/modules/user'
import useBaseStore from '@store/modules/base'
import { nextTick } from 'vue';
import dayjs from 'dayjs'

const depositslipManageStore = useDepositslipManageManageStore()
const agentsManageStore = useAgentsManageManageStore()
const userStore = useUserStore()
const baseStore = useBaseStore()
const { proxy } = getCurrentInstance()
const examineRef = ref(null)

const state = reactive({
  modalVisible: false,
  dialogTitle: '',
  viewData: {},
  form: {
    agentsshstatus: '审核通过',
    agentsshdate: '',
    agentsshr: userStore.nickname,
    agentsshbz: ''
  },
  sfzImages: [],
  yyzzImages: [],
  rules: {
    agentsshstatus: [
      { required: true, message: '请选择审核状态', trigger: 'blur' }
    ],
    agentsshdate: [
      { required: true, message: '请选择审核时间', trigger: 'blur' }
    ],
    agentsshr: [
      { required: true, message: '请输入审核人', trigger: 'blur' }
    ],
    // agentsshbz: [
    //   { required: true, message: '请输入审核备注', trigger: 'blur' }
    // ]
  },
  //付款单信息
  tableLoading: false,
  tableData: [],
  queryParams: {
    depositslipid: ''
  },
})

const emits = defineEmits(['refresh'])

const getDataView = (agentsid) => {
  nextTick(async () => {
    const result = await agentsManageStore.view({ "agentsid": agentsid })
    state.viewData = result
    console.log(result)
    state.form.agentsshdate = dayjs().format('YYYY-MM-DD HH:mm:ss')
    await getImages(agentsid)
  })
}

const submitDialog = () => {
  examineRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const params = {
          ...state.form,
          agentsid: state.viewData.agentsid,
        }
        state.submitLoading = true
        await agentsManageStore.agentsExamine(params)
        state.viewData = {}
        state.sfzImages = []
        state.yyzzImages = []
        state.submitLoading = false
        examineRef.value.resetFields()
        proxy.$modal.msgSuccess('操作成功！')
        emits('refresh')
        state.modalVisible = false
      } catch (error) {
        state.submitLoading = false
      }
    }
  })
}

const cancelDialog = () => {
  state.viewData = {}
  state.sfzImages = []
  state.yyzzImages = []
  examineRef.value.resetFields()
  state.modalVisible = false
}

const openDialog = async (data = {}) => {
  if (Object.keys(data).length) await getDataView(data.agentsid)
  state.modalVisible = true
  state.dialogTitle = Object.keys(data).length ? `审核【${data.agentsname}】` : ''

  getList({
    depositsaccountid: state.viewData.agentsid,
    pageindex:  1,
    rows:  9999
  })
}

const getImages = async (id) => {
  try {
    const imgDataList = await baseStore.attachmenLoad({ attlsh: id, pageindex: 1, rows: 9999 })
    imgDataList.Data.forEach(item => {
      console.log('图片：', item)
      if (item.attmodel === 'sfz') state.sfzImages.push({
        url: item.url
      })
      if (item.attmodel === 'yyzz') state.yyzzImages.push({
        url: item.url
      })
    })
  } catch (error) {

  }
}

/** 查询菜单列表 */
const getList = async (query) => {
  state.tableLoading = true
  const { Total, Data } = await depositslipManageStore.list(query)
  state.tableData = Data

  state.tableLoading = false
}

defineExpose({
  openDialog
})
</script>

<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  vertical-align: top;
}
</style>
  